<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>数据统计</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/recordSum.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="css/app.css" />-->
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}

			.mui-control-content {
				height: 150px;
			}

			.bgwhite {
				background-color: white;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">数据统计</h1>
		</header>
		<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="divTab" class="mui-segmented-control">
				</div>
			</div>
			<div id="divTabContent">

			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="libs/lib.js"></script>
		<script>
			var defaultSiteId = "";

			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});

				Site_List();
			})(mui);

			function Site_List() {
				var servicesType = localStorage.getItem('SERVICE_TYPE');
				var param = {
					Param:{
						ServicesType: servicesType
					}
				}
				Core.Post("Site/List", param, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}

					var list = result.data;
					var html = "",
						htmlContent = "";
					var defaultIndex = 0;
					var siteId = Core.Tool.GetUrlParam("siteId");
					if (siteId) {
						for (var i = 0; i < list.length; i++) {
							if (list[i].id == siteId) {
								defaultIndex = i;
								break;
							}
						}
					}

					for (var i = 0; i < list.length; i++) {
						if (i == defaultIndex) {
							html += "<a class='mui-control-item bgwhite mui-active' id='tbl_" + list[i].id +
								"' href='#" + list[i].id + "'>" + list[i].name + "("+list[i].total+")</a>";
							htmlContent += " <div id='" + list[i].id +
								"' class='mui-control-content mui-content container bgwhite mui-active'><div class='golden-grid' id='dataGrid_" +
								list[i].id + "' style='padding-bottom:120px;'></div></div> ";
							continue;
						}
						html += "<a class='mui-control-item bgwhite' id='tbl_" + list[i].id + "' href='#" + list[i].id +
							"'>" + list[i].name + "（"+list[i].total+")</a>";
						htmlContent += " <div id='" + list[i].id +
							"' class='mui-control-content mui-content container bgwhite'><div class='golden-grid' style='padding-bottom:120px;' id='dataGrid_" +
							list[i].id + "'></div></div> ";
					}
					document.getElementById("divTab").innerHTML = html;
					document.getElementById("divTabContent").innerHTML = htmlContent;

					for (var i = 0; i < list.length; i++) {
						document.getElementById("tbl_" + list[i].id).addEventListener('tap', function() {
							var id = this.id.replace("tbl_", "");
							Tag_Report(id);
						}, false);
					}

					if(list && list[defaultIndex])
						Tag_Report(list[defaultIndex].id)
				});
			}

			function Tag_Report(siteId) {
				defaultSiteId = siteId;

				var param = {
					Param: {
						SiteId: siteId
					}
				}
				Core.Post("Report/TagSum", param, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}

					var list = result.data;
					const gridContainer = document.getElementById('dataGrid_' + defaultSiteId);
					gridContainer.innerHTML = "";
					list.forEach(item => {
						const card = document.createElement('div');
						card.className = 'golden-card';
						card.classList.add(item.className);

						card.innerHTML = `
							<div class="number-section">
								<div class="number">${item.total}</div>
							</div>
							<div class="text-section">
								<h4>${item.tagTypeName}</h4>
								<p>${item.tagName}</p>
							</div>
						`;

						gridContainer.appendChild(card);
					});

					// MUI组件初始化
					mui.init();
				});
			}

			function Record_Edit(id) {
				window.location.href = "record_edit.html?siteId=" + defaultSiteId + "&id=" + id;
			}

			function Record_Input() {
				window.location.href = "record_input.html?siteId=" + defaultSiteId;
			}
		</script>

	</body>

</html>